<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>QQ彩贝</title>
		<style>
		*{
			margin: 0;
			padding: 0;
		}
		li{
			list-style: none;
		}
		a{
			text-decoration:none;
			color: black;
		}
		#d2{
			height: 120px;
			background-color: #F9F9F9;
			
		}
		#d2>ul{
			display: flex;
			flex:row nowrap;
		}
		#d2 li{
			height: 120px;
			width: 180px;
			font-size: 15px;
			line-height: 140px; 
			/* border: 1px solid green; */
			text-align: center;
		}
		#d2 .logo{
			width: 230px;
			margin: 0 80px;
			background:url(image/logo_170x46.png) 0 center no-repeat;
		}
		#d2 li.back{
			position: relative;
		}
		#d2 li.back span{
			cursor: pointer;
			position: absolute;
			display: inline-block;
			width: 40px;
			height: 30px;
			background: url(image/header_03.png) no-repeat 0 center;
			left: 30px;
			top: 35px;
		}
		#d2 li.back span:hover{
			background-image: url(image/header_05.png);
			width: 80px;
			animation: bread 1s;
		}
		@keyframes bread{
			from{width: 40px;}
			10%{
				width: 44px;
			}
			20%{
				width: 48px;
			}
			40%{
				width: 56px;
			}
			60%{
				width: 64px;
			}
			80%{
				width: 72px;
			}
			to{width: 80px;}
		}
		</style>
	</head>
	<body>
		<div id="d2">
			<ul>
				<li class="logo"><a href="#"></a></li>
				<li class="back"><a href="#" >返回商城</a><span></span></li>
				<li><a href=""></a></li>
				<li><a href=""></a></li>
				<li><a href=""></a></li>
				<li><a href=""></a></li>
				<li><a href=""></a></li>
				<li><a href=""></a></li>
				<li><a href=""></a></li>
			</ul>
		</div>
	</body>
</html>
